<template>
  <div>
    <ToolsBar :telescoping_status="false"></ToolsBar>
    <div class="search_area">
      <div class="w1280">
        <el-row>
          <el-input
            clearable
            v-model="searchWord"
            :placeholder="placeholder"
          ></el-input>
          <el-button type="primary" class="btn">搜一下</el-button>
        </el-row>
      </div>
    </div>
    <div class="w1280 searchResult">
      <el-card>
        <div slot="header" class="header">
          <div
            style="
              width: 100%;
              display: flex;
              align-items: center;
              justify-content: space-between;
            "
          >
            <div>
              <span class="active">综合</span>
              <span>最新</span>
            </div>
            <div>相关结果约<strong>5,035</strong>个</div>
          </div>
        </div>
        <div class="searchList">
          <el-row class="item" v-for="(item, index) in 20" :key="index">
            <el-col :span="20">
              <h3><b>uni</b>-music:<b>uniapp音乐播放器</b></h3>
              <p>
                页面切换时也需要保持音乐持续播放,因此需要对播放器进行全局状态管理,由于VueX对ts并不友好,此处引入Pinia状态管理
                Pinia 全局初始化Audio实例:uni.createInnerAudioContext()
                Audio实例uni.getBackgroundAudioManager() 微信小程序后台播放 ...
              </p>
              <div class="notice_icon">
                <div>
                  <span><i class="el-icon-view"></i>2273</span>
                  <span><i class="el-icon-finished"></i>20</span>
                  <span><i class="el-icon-chat-dot-round"></i>18</span>
                </div>
                <div>
                  <span>Delusion</span>
                  <span>2023-08-15</span>
                </div>
              </div>
            </el-col>
            <el-col :span="4">
              <img src="../static/upload/1691589550076.jpg" />
            </el-col>
          </el-row>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import ToolsBar from "@/components/toolsBar.vue";
export default {
  components: {
    ToolsBar,
  },
  data() {
    return {
      searchWord: "",
      activeIndex: 0,
      placeholder: "热门搜索：Node.js",
    };
  },
};
</script>
<style>
@import "../assets/css/article.css";
</style>